<template>
  <div class="wrapper">
    <cover-view class="top">
      <cover-view class="tips">消费金额</cover-view>
      <cover-view class="input">
        <!-- #ifdef MP-WEIXIN -->
        <cover-view>￥{{ allMoney }}</cover-view>
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <text>￥{{ allMoney }}</text>
        <!-- #endif -->
      </cover-view>
      <cover-view class="voucher">可用优惠券</cover-view>
    </cover-view>

    <div class="content" v-if="couponList.length > 0">
      <div class="coupons" v-for="(item, index) in couponList" :key="item.id">
        <div class="coupons-content">
          <div class="left">
            <image
              class="coupons-img"
              :src="'https://mini.jiaw.com/img/1653720211206.jpg'"
            ></image>
          </div>

          <div class="right">
            <div class="coupons-money">{{ item.disValue }}元抵用券</div>
            <span>{{ item.couponName }}</span>
            <p>使用期限：{{ item.useTimeEnd }}</p>
          </div>
        </div>
        <div class="bottom">
          <div class="line"></div>
          <canvas
            disable-scroll="true"
            class="canca"
            :canvas-id="item.code + '1'"
          />
          <canvas class="canvas" :canvas-id="item.code" />
          <p class="code">{{ item.code }}</p>
          <div class="rules">
            <p @click="changeRules(index)">使用规则▼</p>
            <p class="rules-item" v-if="current === index && showRules">
              <u-parse :html="item.couponDesc || '无'"></u-parse>
            </p>
          </div>
        </div>
      </div>
      <div class="placeholder"></div>
    </div>
    <cover-view class="money">
      <cover-view class="money-item">
        <cover-view class="expenditure-amount">实付金额</cover-view>
        <cover-view class="preferential-amount">
          <cover-view class="total-money">￥{{ value }} &nbsp;</cover-view>
          <cover-view class="totalFee">
            共优惠{{ totalFee }}元
            <cover-view class="kong"></cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
      <cover-view class="btn">
        <cover-view class="buy btns" @click="checks">支 付</cover-view>
        <cover-view class="cancel btns" @click="back">取 消</cover-view>
      </cover-view>
    </cover-view>
  </div>
</template>

<script>
import wxbarcode from 'wxbarcode'
import mixins from '@/mixins'
import {
  pay,
  recordPay,
  getUserValidCode,
  getUserFreeCode,
  tsWxPay,
  getPayOrder,
  getZfbPayOrder,
  aliPay
} from '@/api'
export default {
  mixins: [mixins],
  onLoad(e) {
    this.allMoney = e.money
    this.value = e.money
    this.id = e.id
    getUserValidCode(this.openId, this.allMoney, this.id).then(res => {
      // if (res.data && res.data.CouponCodeList.length > 0) {
      this.couponList = res.data.CouponCodeList
      this.totalFee = res.data.disAmount
      this.value = (this.allMoney - res.data.disAmount).toFixed(2)
      this.couponList.forEach(e => {
        wxbarcode.barcode(e.code, e.code, 700, 200, this)
        wxbarcode.qrcode(e.code + '1', e.code, 400, 300, this)
        this.couponCodeList.push(e.code)
      })

      getUserFreeCode(this.openId, this.id, this.allMoney).then(rez => {
        if (rez.data.CouponCodeList.length > 0) {
          let freeMoney = 0
          rez.data.CouponCodeList.forEach(e => {
            wxbarcode.barcode(e.code, e.code, 700, 200, this)
            wxbarcode.qrcode(e.code + '1', e.code, 400, 300, this)
            freeMoney += e.disValue
            this.couponCodeList.push(e.code)
          })
          this.couponList = [...this.couponList, ...rez.data.CouponCodeList]
          this.value = this.value - freeMoney
          this.totalFee = this.totalFee + freeMoney
        }
      })
      // }
    })
  },
  data() {
    return {
      value: '',
      id: '',
      totalFee: 0,
      allMoney: 0,
      couponList: [],
      couponCodeList: [],
      showRules: false,
      current: 0
    }
  },

  methods: {
    payment() {
      //#ifdef MP-WEIXIN
      pay(this.id, this.openId, this.value, this.couponCodeList).then(res => {
        if (res === '该用户线上支付次数已达上限') {
          uni.showModal({
            content: res,
            showCancel: false,
            success: res => {
              if (res.confirm) {
                console.log('ok')
              }
            }
          })
          return
        }
        const { timeStamp, nonceStr, signType, paySign } = res
        wx.requestPayment({
          timeStamp: timeStamp,
          nonceStr: nonceStr,
          package: res.package,
          signType: signType,
          paySign: paySign,
          success: () => {
            getPayOrder(this.openId, this.id, this.value).then(result => {
              uni.navigateTo({
                url:
                  '/pages/package/shop/component/payment-successful?id=' +
                  result.data.id +
                  '&money=' +
                  result.data.payAmount +
                  '&time=' +
                  result.data.payTime
              })
            })
          },
          fail: err => {
            console.log(err)
          }
        })
      })
      //#endif
      // #ifdef MP-ALIPAY
      aliPay(this.userInfo.zfbId, this.id, this.value).then(results => {
        my.tradePay({
          // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
          tradeNO: results.tradeNum,
          success: () => {
            getZfbPayOrder(this.userInfo.zfbId, this.id, this.value).then(
              result => {
                console.log(result)
                uni.navigateTo({
                  url:
                    '/pages/package/shop/component/payment-successful?id=' +
                    result.data.id +
                    '&money=' +
                    result.data.payAmount +
                    '&time=' +
                    result.data.payTime
                })
              }
            )
          },
          fail: err => {
            console.log(err)
          }
        })
      })
      //#endif
    },
    checks() {
      uni.showModal({
        content: '是否线上支付?',
        success: res => {
          if (res.confirm) {
            this.payment()
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  .top {
    height: 320rpx;
    // position: fixed;
    background: #fff;
    width: 100%;
    // top: 0;
    padding: 0 40rpx;
    display: flex;
    flex-direction: column;
    .tips {
      font-weight: 600;
      font-size: 32rpx;
      padding: 40rpx 0;
    }
    .input {
      width: 80%;
      border: 1rpx solid #dbdbdb;
      background: #dbdbdb;
      color: #fff;
      padding: 20rpx 40rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      font-weight: 600;
    }
    .voucher {
      margin: 40rpx 0 20rpx 0;
      font-weight: 600;
      font-size: 32rpx;
    }
  }

  .content {
    padding: 0rpx 40rpx;
    margin-top: 280rpx;
    display: flex;
    flex-direction: column;
    .coupons {
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      border: 3px solid #dbdbdb;
      border-radius: 20rpx;
      margin: 20rpx 0;
      .coupons-content {
        display: flex;
        height: 140rpx;
        .left {
          width: 80rpx;
          .coupons-img {
            width: 60rpx;
            height: 40rpx;
          }
        }
        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .coupons-money {
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            span {
              color: #df0027;
              font-size: 32rpx;
            }
            .btn-coupon {
              color: #df0027;
              height: 70rpx;
              border: 1px solid #df0027;
              background: #fff;
            }
          }
          .tip {
            color: #0b314d;
            font-size: 26rpx;
            padding-bottom: 20rpx;
          }
          p {
            font-size: 24rpx;
          }
        }
      }
      .bottom {
        flex: 1;
        margin-top: 20rpx;
        .canca {
          width: 160px;
          height: 160px;
          margin: 0 auto;
        }
        .canvas {
          width: 100%;
          height: 105px;
        }
        .line {
          width: 100%;
          height: 1rpx;
          background: rgb(218, 216, 216);
        }
        .code {
          display: flex;
          justify-content: center;
        }
        .rules {
          padding-top: 20rpx;
          color: #000;
          font-size: 28rpx;
          .rules-item {
            font-size: 28rpx;
            color: #000;
          }
        }
      }
    }
    .placeholder {
      height: 300rpx;
    }
  }
  .money {
    background: #fff;
    height: 296rpx;
    position: fixed;
    display: flex;
    bottom: 40rpx;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 30rpx;
    .money-item {
      display: flex;
      width: 90%;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 42rpx;
      border: 1px solid rgb(221, 221, 221);
      .expenditure-amount {
        font-weight: 600;
        font-size: 32rpx;
      }
    }
    .preferential-amount {
      .total-money {
        font-weight: 600;
        font-size: 30rpx;
      }
      .kong {
        display: inline-block;
        width: 15rpx;
      }
      .totalFee {
        color: #df0027;
        font-size: 24rpx;
      }
    }
    .btn {
      display: flex;
      padding: 60rpx 0 20rpx 0;
      width: 100%;
      .btns {
        height: 100rpx;
        line-height: 100rpx;
        margin: 0 40rpx;
        border-radius: 100rpx;
        color: #fff;
        font-size: 30rpx;
        flex: 1;
        text-align: center;
      }
      .buy {
        background: #df0027;
      }
      .cancel {
        color: #868585;
        border: 1px solid #b3b3b3;
        background: #fff;
      }
    }
  }
}
</style>
